// 设置
function openSetting() {
    // 显示面板
    $('.setting-back').css({
        display: 'block',
        transform: 'translate(-' + parseInt($('.setting-back').css('width')) / 2 + 'px, -' + parseInt($('.setting-back').css('height')) / 2 + 'px)',
        zIndex: 1,
    });

    // 为tab添加点击事件
    $('.setting-tab>ul>li').unbind('click', selectSettingTab);
    $('.setting-tab>ul>li').click(selectSettingTab);
    // 点击第1个tab
    $('.setting-tab>ul>li:nth-child(1)').click();

    // 为关闭按钮绑定关闭事件
    $('.setting-close').unbind('click', closeWindow);
    $('.setting-close').click(closeWindow);

    $('.setting-title').html('设置选项'); // 标题
    moveWindow(); // 设置移动属性
    sound('openwindow');
};


// 点击tab选择tab和body
// 自动识别点击了第几个tab
function selectSettingTab() {
    let index = $('.setting-tab>ul>li').index(this) + 1;
    sound('select');
    // tab
    $('.setting-tab>ul>li').attr('class', 'frosted-glass-light'); // 所有的tab
    $('.setting-tab>ul>li').css('opacity', '0.3');;
    $('.setting-tab>ul>li:nth-child(' + index + ')').css('opacity', '1');
    // body
    $('[class*=setting-body]').css('display', 'none');
    $('[class*=setting-body' + index + ']').css('display', 'block');
    // 显示内容
    if (index == 1) {
        $('.tomato-size').html(tomatoSize);
        $('.increase-tomato-size').unbind('click');
        $('.increase-tomato-size').click(function() {
            tomatoSize >= 2 ? 2 : tomatoSize++;
            $('.tomato-size').html(tomatoSize);
            writeDataFromlocalStorage('tomatoSize', tomatoSize)
            sound('click');
        });
        $('.decrease-tomato-size').unbind('click');
        $('.decrease-tomato-size').click(function() {
            tomatoSize <= 1 ? 1 : tomatoSize--;
            $('.tomato-size').html(tomatoSize);
            writeDataFromlocalStorage('tomatoSize', tomatoSize)
            sound('click');
        });
    } else if (index == 2) {
        // 声音
        // 声音
        // 声音
        $('.bgm-silence .icon').html(bgmSilence ? '' : '');
        $('.sound-silence .icon').html(soundSilence ? '' : '');
        $('[class*=silence]').off('click');
        $('.bgm-silence').click(function() {
            clickCheckbox('bgmSilence', $(this));
            bgmSilence = !bgmSilence;
            $('.bgm-silence .icon').html(bgmSilence ? '' : '');
            volumeBGM(); // 设置背景音乐音量
            sound('click');
        });
        $('.sound-silence').click(function() {
            clickCheckbox('soundSilence', $(this));
            soundSilence = !soundSilence;
            $('.sound-silence .icon').html(soundSilence ? '' : '');
            sound('click');
        });

        let maxWidth = parseInt($('.slider-bgmVolume').parent().css('width'));
        $('.slider-bgmVolume').css('left', bgmVolume / 100 * maxWidth + 'px');
        $('.slider-soundVolume').css('left', soundVolume / 100 * maxWidth + 'px');
        dragSlider(); // 添加 slider 滑动事件
    };

};



// [声音-音量] 拖动滑块
function dragSlider() {
    let dragElement = document.querySelectorAll('[class*="slider"]');

    for (let i = 0; i < dragElement.length; i++) {
        dragElement[i].addEventListener('mousedown', function(e) {
            let x = e.clientX - parseInt(this.style.left);
            let minLeft = 0;
            let maxLeft = parseInt($('[class*="slider"]:eq(' + i + ')').parent().css('width'));

            function move(e) {
                let mouseLeft = parseInt(e.clientX - x);
                mouseLeft = mouseLeft < minLeft ? minLeft : mouseLeft; // 不让其超过左边界
                mouseLeft = mouseLeft > maxLeft ? maxLeft : mouseLeft; // 不让其超过右边界

                dragElement[i].style.left = mouseLeft + 'px';
                // 设置属性
                let value = parseInt(mouseLeft / maxLeft * 100);
                if (dragElement[i].classList.contains('slider-bgmVolume')) {
                    writeDataFromlocalStorage('bgmVolume', value);
                    bgmVolume = value;
                    volumeBGM();
                } else if (dragElement[i].classList.contains('slider-soundVolume')) {
                    writeDataFromlocalStorage('soundVolume', value);
                    soundVolume = value;
                };
            };

            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            });
        });
    };

};




// 根据localStorage的数据，设置Checkbox
// localStorageKey：localStorage内的key（如： - rememberPassword: "true" 中的 'rememberPassword' 就是key）
// checkboxObject：jQuery选择的元素
// setValue：可选参数，强制设置值
function setCheckbox(localStorageKey, checkboxObject, setValue) {
    let value = readDataFromlocalStorage(localStorageKey) ? readDataFromlocalStorage(localStorageKey) : false;
    value = (value == 'true' || value == true) ? 'true' : 'false'; // 转化为字符
    value = setValue != undefined ? setValue : value;
    if (value == 'true' || value == true) {
        checkboxObject.children('.icon').html('');
    } else {
        checkboxObject.children('.icon').html('');
    };
    writeDataFromlocalStorage(localStorageKey, value);
};


// 点击Checkbox
function clickCheckbox(localStorageKey, checkboxObject) {
    let value = readDataFromlocalStorage(localStorageKey) ? readDataFromlocalStorage(localStorageKey) : false;
    value = (value == 'true' || value == true) ? 'false' : 'true'; // 取反，转化为字符
    writeDataFromlocalStorage(localStorageKey, value);
    setCheckbox(localStorageKey, checkboxObject, value);
};